<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5_NewTags</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
			z-index: 9999;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example{
			position: relative;
			width: 100%;
		}
		.example>h2{
			margin: 50px auto;
			text-align: center;
		}
		.example>nav{
			position: absolute;
			margin: 50px auto;
			left: 0;
			top:0;
			width: 20%;
			display: flex;
			flex-flow:column wrap;
		}
		.example>nav>a{
			display: block;
			text-align: left;
			margin: 5px;
		}
		.example>iframe{
			position: absolute;
			top:0;
			right: 0;
			display: block;
			margin: 50px auto;
			width: 80%;
			height: 800px;
			background-color: rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<header class="true">
		<h1 id='h-title'>第12节:响应式</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>一、书写</h4>
			<p>
		1. 写在样式表里面：

			@media screen and (max-width:320px) { } 
			@media screen and (min-width:320px) and (max-width:640px) { }
			@media screen and (min-width:640px) { }

		2. 样式表也可以引入外部的

			 &#60;link rel="stylesheet" type="text/css" href="a.css"  media="screen and (min-width: 1000px)"&gt;

			 &#60;link rel="stylesheet" type="text/css" href="b.css"  media="screen and (min-width: 600px) and (max-width: 1000px)"&gt;

			 &#60;link rel="stylesheet" type="text/css" href="c.css"   media="screen and (max-width: 600px)"&gt;

			  
			 竖屏- 屏幕宽度小于高度
			 &#60;link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”&gt;

			 横屏-屏幕宽度大于高度
			 &#60;link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”&gt;


			</p>
			<h4>二、响应式布局缺点和优点</h4>
			<p>
				优点：
					面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。

				缺点：
					兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，
					加载时间延长，其实这是一种折中性质的设计解决方案，
					由于多方面元素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

				@media (min-width: 768px){ //>=768的设备 }
				@media (min-width: 992px){ //>=992的设备 }
				@media (min-width: 1200){ //>=1200的设备 }
				如果你把@media (min-width: 768px)写在了下面那么很悲剧，
				因为如果是1440,由于1440>768那么你的1200就会失效。

				所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
				@media (max-width: 1199){ //<=1199的设备 }
				@media (max-width: 991px){ //<=991的设备 }
				@media (max-width: 767px){ //<=768的设备 }

			</p>
			<h4>media-Css3响应式</h4>
			<p>
				<mark>媒体类型</mark>
				all 		所有媒体
				screen 	彩屏设备
				print 	用于打印机和打印预览
				speech 	应用于屏幕阅读器等发声设备
				braille 	应用于盲文触摸式（已废弃 ）
				embossed 	用于打印的盲人印刷设备（已废弃 ）
				projection 	用于投影设备（已废弃 ）
				tty 		不适用像素的设备（已废弃 ）
				tv  		电视（已废弃 ）
				
				<mark>关键字</mark>
				and
				not     	用来排除某种制定的媒体类型
				only     	(限定某种设备)某种特定的媒体类型

				<mark>媒体特性</mark>
				(width:600px) 				宽
				(max-width:600px) 			最大宽度 <=600
				(min-width: 480px)  			最小宽度 >=480
				(orientation:portrait)  		竖屏
				(orientation:landscape)			横屏

				(-webkit-min-device-pixel-ratio: 2) 像素比
				window.devicePixelRatio是设备上物理像素与

				设备独立像素(device-independent pixels (dips))的比例
				window.devicePixelRatio = 物理像素 / dips

				<mark>方式一 媒体查询：</mark>
				@media [not|only] mediatype [and] (media feature)  {
				    			CSS-Code;
						}

				@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}


				 <mark>方式二：</mark>
				 @import url('index.css') [not|only]  mediatype [and] (media feature) [and] (media 
				feature); 需顶行写

				@import url("css/reset.css")  screen;


				<mark>方式三：样式引入</mark>
				&#60;link rel="" type="" href="A.css"  media="screen and (min-width: 800px)"&gt;

				&#60;link rel="" type="" href="A.css"  media="screen and (min-width: 800px)"&gt;
				&#60;link rel="" type="" href="B.css"  media="screen and (min-width: 600px) and (max-width: 800px)"&gt;
				&#60;link rel="" type="" href="C.css"   media="screen and (max-width: 600px)"&gt;


				&#60;link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”&gt;
				&#60;link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”&gt;
				&#60;link rel="stylesheet" type="text/css" media="print" href="print.css"  /&gt;

				&#60;meta name="viewport" content="" /&gt;
				视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
				width			[pixel_value | device-width]
				height 			[pixel_value | device-height]
				initial-scale 		初始比例
				minimum-scale 		允许缩放的最小比例
				maximum-scale 		允许缩放的最大比例 
				user-scalable 		是否允许缩放 （yes || no 或 1 | 0）
				target-densitydpi 	[dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 

				&#60;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
				此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

				emmet快捷键：meta:compat
			</p>
			<h4>自适应+响应式</h4>
			<p>
				1. 响应式布局简而言之就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
				可以理解为做一个网站就能适应多种设备，而不用在为每个设备做一个特定的版本，在不同的设备上展现的模式也不一样。
				响应式可以为不同终端的用户提供更舒适的界面和更好的浏览体验。

				2. 自适应布局指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
				可以理解为不同大小的设备上呈现同样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动调整布局。

				那制作网站的时候“什么样的网站适合使用自适应布局？什么样的网站适合响应式布局？
				理论上来说，响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切实际。
				
				自适应布局可以让你的设计更加可控，因为你只需要考虑了了几种状态就万事大吉了。
				但在响应式布局中你可能需要面对非常多状态——是的，大部分状态之间的区别很小，
				但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。

				同时这也带来了测试上的难题，你很难有绝对的把握预测到它会怎样。换个角度说，这也是响应式布局的魅力所在。
			</p>
		</article>
	</section>
	<section class='example'>
		<h2>案例展示:</h2>
		<nav>
			<a href="case/1-响应式内部样式.html" target="case"></a>
			<a href="case/2-响应式外部样式.html" target="case"></a>
			<a href="case/3-响应式横竖屏外部样式.html" target="case"></a>
			<a href="case/案例/index.html" target="case"></a>
		</nav>
		<iframe name='case' src="homeWork.html" frameborder="0"></iframe>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		(function(){
			var hTitle = document.getElementById('h-title'),
				otitle = document.querySelector('head title');
			otitle.innerText = hTitle.innerText;
			
			var oCase = document.querySelectorAll('.example>nav>a'),
				length = oCase.length;
			for (var i = 0; i < length; i++) {
				oCase[i].innerText = decodeURI(oCase[i].href.split('case/')[1]);
			}
		})();
	</script>
</body>
</html>